<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-v-bind操作.html</title>
    <script src="js/vue.js"></script>

</head>
<body>

<div id="app">
    <a v-bind:href="url">{{title}}</a>
    <br>
    <a :href="url">{{title}}</a>
    <br>
    <img style="height: 200px" v-bind:src="gztPic" alt="">
    <br>
    <img style="height: 200px" :src="gztPic" alt="">

    <div v-if="money>5000">
         今晚会所见
    </div>
    <div v-else>
        沙县大酒店见
    </div>

</div>

<script>

    /*
    *  v-bind  绑定标签属性
    *          a   标签 href 属性
    *          img 标签 src 属性
    *  v-if="表达式"
    *       判断页面元素是否 可以见
    *
    * */
    new Vue({
        el:"#app",
        data:{
            title:"蜗牛学苑",
            url:"http://www.woniuxy.com",
            gztPic:"https://img2.baidu.com/it/u=2061447282,868577367&fm=253&fmt=auto&app=120&f=JPEG?w=608&h=456",
            money:10000
        }
    })

</script>

</body>
</html>